<template>
  <div>
    <!-- <div class="toptitle">角色列表</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="店铺名称：">
        <el-input v-model="formInline.storeName" placeholder></el-input>
      </el-form-item>

      <el-form-item>
        <el-form-item label="店铺类型：">
          <el-select v-model="formInline.storeType" placeholder="标准店">
            <el-option v-for="item in storeType" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店状态：">
          <el-select v-model="formInline.reviewStatus" placeholder="全部">
            <el-option label="运营状态" value="0"></el-option>
            <el-option label="关闭状态" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{background:'#ebecf0',color:'#606266'}"
    >
      <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
      <el-table-column prop="storeName" label="店铺名称"></el-table-column>
      <el-table-column label="店铺类型" prop="storeType" align="center">
        <template slot-scope="scope">
          <template v-for="item in storeType">
            <span v-if="scope.row.storeType == item.value" :key="item.value">{{ item.label }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="经销商公司名"></el-table-column>
      <el-table-column prop="legalPerson" label="法人代表"></el-table-column>
      <el-table-column prop="legalPersonPhone" label="法人手机号"></el-table-column>
      <el-table-column prop="storeOwnerName" label="店主姓名"></el-table-column>
      <el-table-column prop="storeOwnerPhone" label="店主手机号"></el-table-column>
      <el-table-column prop="storeAddressDetail" label="店铺详细地址"></el-table-column>
      <el-table-column label="操作" width="150" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="seedetailshop(scope.row)" type="text">查看详情</el-button>

          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="mini"
            v-if="scope.row.openStatus===0"
          >启用店面</el-button>

          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="mini"
            v-if="scope.row.openStatus===1"
          >关闭店面</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top:2px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { qryStore, storeAdministration } from "@/api/addShopapply";
// import { getmemberorg } from "@/api/organaz";
import qs from "qs";
import { dict } from '../../dict';

export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10
      },
      total: 0,
      data: [],
      //   loading: true,
      dialogVisibleorg: false,
      formInline: {
        storeName: "",
        reviewStatus: "",
        storeType: ""
      },
      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      btnarr: [],
      arrid: [],
      arroneone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: "",
      rolefenid: "",
      selected: {},
      ruleForm: {
        name: "",
        region: "",
        sec: "",
        desc: "",
        state: ""
      },
      checkedarr: [],
      roleid: "",
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,

      arrone: [],

      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择角色分类", trigger: "blur" }
        ],
        state: [{ required: true, message: "请选择状态", trigger: "change" }]
      }
    };
  },
  computed: {
    storeType: () => dict.storeType
  },
  mounted() {
    this._qryStore();
  },
  methods: {
    handleClick(v) {
      if (v.openStatus === 0) {
        var uuid = 1;
      } else if (v.openStatus === 1) {
        var uuid = 0;
      }

      this.$confirm("确认执行此操作吗？").then(_ => {
        let data = { uuid: v.uuid, openStatus: uuid };
        storeAdministration(data).then(res => {
          this.$message({
            showClose: true,
            message: res.message,
            type: "success"
          });
          this._qryStore();
        });
      });
    },
    kong() {
      this.formInline.storeName = "";
      this.formInline.reviewStatus = "";
      this.formInline.storeType = "";
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    },
    search() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          storeName: this.formInline.storeName,
          reviewStatus: this.formInline.reviewStatus,
          storeType: this.formInline.storeType
        },
        ascs: [],
        descs: []
      };
      //  };
      qryStore(data).then(res => {
        // this.tableData = res.records;
      });
    },

    _qryStore() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          storeName: this.formInline.storeName,
          reviewStatus: this.formInline.reviewStatus,
          storeType: this.formInline.storeType
        },
        ascs: [],
        descs: []
      };

      qryStore(data).then(res => {
        this.tableData = res.records;
      });
    },
    seedetailshop(v) {
      this.$router.push({
        name: "infoCaterMerchants",
        params: {
          v: v
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this._qryStore();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this._qryStore();
    },

    showRow(row) {
      //赋值给radio
      this.radio = this.tableData.indexOf(row);
      this.selected = row;
    }
  }
};
</script>
<style  lang="less" scoped>
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 25px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
</style>